<template>
  <div class="home">
    <!-- 头部标题 -->
    <nav-bar class="nav-bar">
      <div slot="center">购物街</div>
    </nav-bar>
    <!-- 轮播图 -->
    <home-banner class="hoem-banner" :banners="banners"></home-banner>
    <!-- 推荐 -->
    <recommend-view :recommends="recommend"></recommend-view>
    <!-- 本周流行 -->
    <featrue-view></featrue-view>
    <!-- 流行,新款,推荐 -->
    <tab-control :titles="['流行','新款','推荐']" class="tab-control"></tab-control>
    <div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
      <div>1111</div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { getHomeData } from "@/network/home";

import NavBar from "@/components/common/navbar/NavBar";

import HomeBanner from "./childComps/HomeBanner";
import RecommendView from "./childComps/RecommendView";
import FeatrueView from "./childComps/FeatrueView";

import TabControl from '@/components/content/tabControl/TabControl'

export default {
  name: "Home",
  data() {
    return {
      banners: null,
      dKeyword: null,
      keywords: null,
      recommend: null,
      goods:{
        pop:{page:0,list:[]},
        new:{page:0,list:[]},
        sell:{page:0,list:[]}
      }
    };
  },
  components: { NavBar, HomeBanner, RecommendView, FeatrueView,TabControl },

  async created() {
    const {
      data: {
        data: { banner, dKeyword, keywords, recommend },
      },
    } = await getHomeData();
    this.banners = banner.list; //轮播图
    this.dKeyword = dKeyword;
    this.keywords = keywords;
    this.recommend = recommend.list; //推荐
    //console.log(banner.list);
    /*  console.log(returnCode);
   console.log(success); */
  },
};
</script>

<style scoped>
.home{
  padding-top: 44px;
}
.nav-bar {
  color: white;
  background-color: rgb(230, 147, 75);

  position: fixed;
  z-index: 99;
  width: 100%;
  top: 0;
}
.tab-control{
  position: sticky;
  top: 44px;
}
</style>
